package com.riaevolution.components
{
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	import mx.containers.Canvas;
	import mx.containers.FormHeading;
	import mx.containers.VBox;
	import mx.controls.LinkButton;
	import mx.core.Container;
	import mx.core.UIComponent;
	
	/**
	 * This component mimics the colapsible panel of MSOutlook task bar.
	 * You need to reach the container in order to addchilds to 
	 * the container panel area.
	 * <code>
	 * mypanel.container.addChild(formItemInstace);
	 * </code>
	 * 
	 * Also you can run it with <code>mypanel.openState = false</code>.
	 * 
	 * 
	 * 
	 * This component use this following style in order to lock good.
	 * If not the rotation of the font doesn work well.
	 * 
	 * <style>
	 * 
	 * @font-face {
	 * 		src: local("Tahoma");
	 * 		fontFamily: myTahoma;
	 * 		fontWeight: bold;
	 * }
	 * 
	 * ColapsibleBar {
	 * 		color:#747474;
	 * 		closeIcon:Embed(source='assets/12px-Go-previous-grey.png');
	 * 		openIcon:Embed(source='assets/12px-Go-next-grey.png');
	 * 		backgroundColor:#EFEFEF;
	 * 		barColor:#CCCCCC;
	 * }
	 * .ColapsibleBarHeaderVertical {
	 * 		fontFamily: myTahoma;
	 * 		color:#747474;
	 * }
	 * .ColapsibleBarHeader {
	 * 		indicatorGap:0;
	 * }
	 * 
	 * </style>
	 * 
	 *  
	 * @author Luciano Bustos
	 * 
	 */	
	public class ColapsibleBar extends Canvas
	{
		
		
		private var _background:UIComponent;
		private var _toogleButton:LinkButton;
		private var _container:VBox;
		
		private var _mainLabel:FormHeading;
		private var _rotaLabel:FormHeading;
		
		public function ColapsibleBar()
		{
			super();
			initChildren();
		}
		private function initChildren():void {
			
			_background = new UIComponent();
			addChild(_background);
			
			
			_mainLabel = new FormHeading();
			_mainLabel.addEventListener(MouseEvent.CLICK, toogleState);
			_mainLabel.label = this.label;
			_mainLabel.visible = stateOpen;
			_mainLabel.styleName = "ColapsibleBarHeader";
			
			addChild(_mainLabel);
			
			
			_rotaLabel = new FormHeading();
			_rotaLabel.rotation = -90;
			_rotaLabel.addEventListener(MouseEvent.CLICK, toogleState);
			_rotaLabel.label = this.label;
			_rotaLabel.visible = !stateOpen;
			_rotaLabel.styleName = "ColapsibleBarHeaderVertical";
			
			addChild(_rotaLabel);
			
			_toogleButton = new LinkButton();
			_toogleButton.addEventListener(MouseEvent.CLICK, toogleState);
			_toogleButton.width = 22;
			_toogleButton.height = 22;
			_toogleButton.name = "toogleButton";
			_toogleButton.styleName = this;
			_toogleButton.setStyle('icon', getIconState() );
			_toogleButton.setStyle('borderStyle','none');
			_toogleButton.setStyle('cornerRadius',0);
			addChild(_toogleButton);
			
			_container = new VBox();
			_container.name = "container";
			_container.styleName = this;
			
			addChild(_container);
		}
		
		private function handleOver(event:Event):void {
			
		}
		
		private var _stateChange:Boolean = false;
		
		/**
		 * This enable me to colapse or expand this componente.  
		 * @param value
		 * 
		 */		
		[Bindable]
		public function set stateOpen(value:Boolean):void {
			_stateOpen = value;
			_stateChange = true;
			
			if(!_stateOpen) {
				width = (minWidth != 0 ? minWidth: 24);
			} else {
				percentWidth = 100;
				//width = measuredMinWidth;
			}
			
			invalidateProperties();
			invalidateDisplayList();
			
			dispatchEvent(new Event("stateChange"));
		}
		public function get stateOpen():Boolean {
			return _stateOpen;
		}
		
		[Bindable]
		private var _labelChanged:Boolean = false;
		override public function set label(value:String):void {
			super.label = value;
			_labelChanged = true;	
		}
		
		override public function get label():String {
			return super.label;
		}
		
		
		private function toogleState(event:Event):void {
			stateOpen = !stateOpen;
		}
		
		private var _stateOpen:Boolean = true;
		
		private function getIconState():Class {
			return  this.getStyle( _stateOpen ? 'openIcon': 'closeIcon') as Class;
		}
		
		override protected function resourcesChanged():void {
			super.resourcesChanged();
			if(_mainLabel && _mainLabel ) {
				_mainLabel.label = _mainLabel.label = label;
			}
		}
		
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
			super.updateDisplayList(unscaledWidth,unscaledHeight);
			
			//si cambio el estado debo actualizar esto.
			if(_stateChange) {
				_mainLabel.visible = stateOpen;
				_rotaLabel.visible = !stateOpen;
				_container.visible = stateOpen;
				_toogleButton.setStyle('icon', getIconState() );
				_stateChange = false;
			}
			//si este cambio el label.			
			if(_labelChanged) {
				_mainLabel.label = _rotaLabel.label = label;
				_labelChanged = false;
			}
			
			if(!initialized) {
				_toogleButton.setStyle('icon', getIconState() );
			}
			
			_background.graphics.clear();
			
			var barColor:Number = getStyle("barColor");
			if(isNaN(barColor)) { barColor = 0xC2C2C2;}
			if(stateOpen) {
				_background.graphics.beginFill(barColor);
				_background.graphics.drawRect(1, 1, unscaledWidth - 2, _toogleButton.height + 2);
			} else {
				_background.graphics.beginFill(barColor);
				_background.graphics.drawRect(1, 1, unscaledWidth - 2, unscaledHeight - 2);
			}
			_background.graphics.endFill();
			
			_mainLabel.x = 1;
			_mainLabel.y = 1 - _mainLabel.getStyle("paddingTop");
			
			_rotaLabel.y = _rotaLabel.measuredWidth + _toogleButton.height + 2;
			_rotaLabel.x = (unscaledWidth - _rotaLabel.height - _rotaLabel.getStyle("paddingTop")*2) / 2; 
			
			_toogleButton.x = unscaledWidth - _toogleButton.width - 1;
			_mainLabel.width = _toogleButton.x - 1;
			
			_container.x = 1;
			_container.y = _toogleButton.height + 3;
			_container.width = unscaledWidth - 2;
			_container.height = unscaledHeight - _toogleButton.height - 3;
		} 
		
		public function get container():Container {
			return this._container;
		}
	}
}